<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img{width: 200px;height: 180px;}
        .box{width: 200px;border: solid 1px black;float: left;}
    </style>
</head>
<body>
    
</body>
<script>
    // var str = "他真的是个'好'人";
    // var str = '他真的是个"好"人';

    // var msg = "好";
    // var str = '他真的是个' + msg + '人';
    // var str = '他真的是个"' + msg + '"人';
    // var str = "他真的是个'" + msg + "'人";
    // console.log(str);


    // document.write("图片")

    // var img = "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png";
    // var qq = "https://mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/qq_logo_2x.png";
    // var img2 = "https://inews.gtimg.com/newsapp_ls/0/13915793952_640330/0"
    // document.write('<img src="'+ img + '" alt="">');
    // document.write('<img src="'+ qq + '" alt="">');
    // document.write('<img src="'+ img2 + '" alt="">');

    // var imgs = ["https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png", "https://mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/qq_logo_2x.png", "https://inews.gtimg.com/newsapp_ls/0/13915793952_640330/0"];
    // var str = "";
    // for(var i=0;i<imgs.length;i++){
    //     str += '<div class="box"><img src="'+ imgs[i] + '" alt=""><span>这是图片的描述</span></div>';
    // }


    var imgs = [{
        title:"百度LOGO",
        src:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
    },{
        title:"腾讯LOGO",
        src:"https://mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/qq_logo_2x.png"
    },{
        title:"新闻图",
        src:"https://inews.gtimg.com/newsapp_ls/0/13915793952_640330/0"
    },{
        title:"新闻图2",
        src:"https://img1.gtimg.com/ninja/2/2021/08/ninja162979069133726.jpg"
    }];


    var str = "";
    for(var i=0;i<imgs.length;i++){
        str += '<div class="box"><img src="'+ imgs[i].src + '" alt=""><span>'+ imgs[i].title +'</span></div>';
    }




    document.write(str);

</script>
</html>